import {
  DownOutlined,
  EllipsisOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import {
  Button,
  Tag,
  Tooltip,
  Modal,
  Rate,
  Comment,
  List,
  message,
} from 'antd';
import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import moment from 'moment';
import { useRequest } from 'umi';
import { ModalForm, ProFormRate } from '@ant-design/pro-components';

export default () => {
  //获取团队
  const getTeamPeople = useRequest((data = {}) => {
    let url = '';
    let count = 0;
    Object.keys(data).map((value: any, index: any) => {
      // console.log(value);
      let key_temp = value;
      let value_temp = data[value];
      if (data[value]) {
        if (count == 0) {
          url = url + '?' + key_temp + '=' + value_temp;
        } else {
          url = url + '&' + key_temp + '=' + value_temp;
        }
        count++;
      }
    });
    return {
      url: `http://10.1.40.84:9998/stuTrain/getTeamPeople` + url,
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
    };
  });
  //获取 打分
  const scoreMaterial = useRequest(
    (data = {}) => {
      let url = '';
      let count = 0;
      Object.keys(data).map((value: any, index: any) => {
        // console.log(value);
        let key_temp = value;
        let value_temp = data[value];
        if (data[value]) {
          if (count == 0) {
            url = url + '?' + key_temp + '=' + value_temp;
          } else {
            url = url + '&' + key_temp + '=' + value_temp;
          }
          count++;
        }
      });
      return {
        url: `http://10.1.40.84:9998/stuTrain/scoreMaterial` + url,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
      formatResult: (res) => res,
    },
  );
  const columns = [
    {
      title: '学生学号',
      dataIndex: 'account',
      key: 'account',
      hideInSearch: true,
    },
    {
      title: '学生名称',
      dataIndex: 'stuName',
      key: 'stuName',
    },
    {
      title: '研究方向',
      dataIndex: 'resDirection',
      key: 'resDirection',
      copyable: true,
    },
    {
      title: '所属导师',
      dataIndex: 'teaName',
      key: 'teaName',
      // render: (_, record) => <Tag color={record.status.color}>{record.status.text}</Tag>,
    },
    {
      title: '所属阶段',
      dataIndex: 'stageName',
      key: 'stageName',
      hideInSearch: true,
      render: (text: any) => <Tag>{text}</Tag>,
      // align: 'right',
      // sorter: (a, b) => a.containers - b.containers,
    },
    // {
    //     title: (
    //         <>
    //             创建时间
    //             <Tooltip placement="top" title="这是一段描述">
    //                 <QuestionCircleOutlined style={{ marginLeft: 4 }} />
    //             </Tooltip>
    //         </>
    //     ),
    //     width: 140,
    //     key: 'since',
    //     dataIndex: 'createdAt',
    //     valueType: 'date',
    //     sorter: (a, b) => a.createdAt - b.createdAt,
    // },
    // {
    //   title: '操作',
    //   width: 164,
    //   key: 'option',
    //   valueType: 'option',
    //   render: (text: any, record: any) => [
    //     <a
    //       key="1"
    //       onClick={() => {
    //       }}
    //     >
    //       查看
    //     </a>,
    //   ],
    // },
  ];
  const MaterialColumns = [
    {
      title: '材料名称',
      dataIndex: 'materialName',
      copyable: true,
      ellipsis: true,
    },
    // {
    //   title: '上传学生',
    //   dataIndex: 'stuName',
    //   key: 'stuName',
    // },
    // {
    //   title: '研究方向',
    //   dataIndex: 'resDirection',
    //   key: 'resDirection',
    // },
    {
      title: '上传时间',
      key: 'createTime',
      dataIndex: 'createTime',
      hideInSearch: true,
      // render: (text: any) => text === null ? <span></span> : moment(text).format('YYYY-MM-DD'),
      render: (text: any) => moment('2022-06-10').format('YYYY-MM-DD'),
    },
    {
      title: '平均评分',
      dataIndex: 'avgScore',
      key: 'avgScore',
      hideInSearch: true,
      sorter: (a: any, b: any) => a.avgScore > b.avgScore,
      render: (text: number) => <Rate defaultValue={text} disabled />,
    },
    {
      title: '操作',
      align: 'center',
      key: 'option',
      valueType: 'option',
      render: (text: any, record: any) => [
        <Button
          disabled={record?.materialContent ? false : true}
          type="link"
          key="1"
          onClick={() => {
            window.open(record.materialContent);
          }}
        >
          查看材料
        </Button>,
        <ModalForm
          key="2"
          title="评分"
          trigger={<a>评分</a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            scoreMaterial
              .run({
                studentId: record.studentId,
                materialId: record.id,
                score: values.score,
              })
              .then((e) => {
                getTeamPeople.run();
                message.success(e.msg);
              });
            return true;
          }}
          width={250}
        >
          <ProFormRate name="score" />
        </ModalForm>,
      ],
    },
  ];
  const expandedRowRender = (record: any) => {
    return (
      <ProTable
        columns={MaterialColumns}
        headerTitle={false}
        search={false}
        options={false}
        dataSource={record?.refList || []}
        pagination={false}
        bordered
        rowKey={(record) => {
          return record.id + Date.now(); //在这里加上一个时间戳就可以了
        }}
      />
    );
  };
  return (
    <>
      <ProTable
        columns={columns}
        dataSource={getTeamPeople?.data || []}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandable={{
          expandedRowRender: (record: any) => expandedRowRender(record),
        }}
        dateFormatter="string"
        headerTitle="团队人员列表"
        options={false}
        onSubmit={(e) => {
          getTeamPeople.run(e);
        }}
        onReset={() => {
          getTeamPeople.run();
        }}
        toolBarRender={() => [
          // <Button key="show">查看日志</Button>,
          // <Button key="out">
          //     导出数据
          //     <DownOutlined />
          // </Button>,
          <Button key="primary" type="primary">
            导出数据
          </Button>,
        ]}
      />
    </>
  );
};
